<template>
  <section>
    <el-form label-width="90px" size="mini" inline>
      <el-form-item label="标题：" class="item">
        {{order.title}}
      </el-form-item>
      <el-form-item label="所属：" class="item">
        {{order.memberName}}
      </el-form-item>
    </el-form>
    <el-form size="mini" label-width="90px" inline>
      <el-form-item label="订单金额：" class="item">
        {{order.totalPrice}}
      </el-form-item>
      <el-form-item label="优惠金额：" class="item" style="border:0px solid red;">
        <el-row style="border: 0px solid green;width: 90px">
          <el-input v-if="inputSale" size="mini" v-model="order.salePrice" style="width: 80%" @keydown.native.prevent.enter="changeSalePrice"/>
          <span v-else>
            {{order.salePrice}}
          </span>
          <span v-if="order.state === 0">
            <i :class="inputSale?'el-icon-check':'el-icon-edit'" @click="inputSale = !inputSale" style="font-size: 15%;color: blue;"/>
          </span>
        </el-row>
      </el-form-item>
      <el-form-item label="实付金额：" class="item">
        {{order.payPrice}}
      </el-form-item>
    </el-form>
    <el-form label-width="90px">
      <el-form-item label="明细：">
        <el-table :data="order.orderItems">
          <el-table-column type="index" label="序号"/>
          <el-table-column label="规格" prop="title"></el-table-column>
          <el-table-column label="单价" prop="price"></el-table-column>
          <el-table-column label="数量" prop="num"></el-table-column>
          <el-table-column label="小计" >
            <template slot-scope="scope">
              {{scope.row.num * scope.row.price}}
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="success" @click="saveBtn">保存</el-button>
        <el-button size="mini" type="primary" @click="payBtn">收款</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler'
  import { mapActions,mapGetters} from 'vuex'
  export default {
    name: "orderDetail",
    props:['order'],
    data(){
      return{
        inputSale:false
      }
    },
    created(){
      this.init()
    },
    watch:{
      order(nv,ov){
        if(nv){
          this.init()
        }
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(){
        console.log('look-----orderDetail----',this.order)
        this.changeSalePrice(this.order.salePrice)
      },
      changeSalePrice(e){
        console.log('change----',e)
        let tmp=this.order.totalPrice - this.order.salePrice
        tmp = tmp.toFixed(2)
        this.inputSale=false
        this.order.payPrice=tmp
      },
      saveBtn(){
        let data={id:this.order.id,salePrice:this.order.salePrice}
        this.$emit('updateSale',data)
      },
      payBtn(){
        console.log('detail里收款-----')
        this.$emit('payOrder',this.order)
      }
    }
  }
</script>

<style scoped>
  .item{
    width: 180px;
  }
</style>
